<template>
	<view class="page">
		<view class="inp">
			<u-input v-model="value" fontSize="12" border="surround" placeholder="搜索订单编号、车牌号">
				<template slot="prefix">
					<u-icon name="search" color="#9e9e9e" size="24"></u-icon>
				</template>
			</u-input>
			<view style="width: 120rpx; text-align: center;">搜索</view>
		</view>
		<view class="top">
			<view class="top-name" @click="index=0" :class="index==0?'active':''">
				<view>维保订单</view>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name" @click="index=1,findCarByStatus();" :class="index==1?'active':''">
				<view>车辆审核订单</view>
			</view>

		</view>
		<view v-if="index==0" style="font-size: 24rpx; margin: 20rpx;">共<text
				style="color:#257CFF">{{lists.length}}</text>条数据</view>
		<view v-else style="font-size: 24rpx; margin: 20rpx;">共<text style="color:#257CFF">{{carList.length}}</text>条数据
		</view>
		<view v-if="index==0">
			<view class="content" v-for="(item,index) in lists" :key="index">
				<view class="order-top">
					<view class="le">
						订单服务内容订单服务内容订单服务内
						订单服务内容订单服务内容订单服务内
					</view>
					<view class="process">待审核</view>
				</view>
				<u-line margin="12rpx 0rpx"></u-line>
				<view class="list">
					<view class="li">
						<view>订单编号</view>
						<view>{{item.orderNumber}}</view>
					</view>
					<view class="li">
						<view>司机姓名</view>
						<view>{{item.driverName}}</view>
					</view>
					<view class="li">
						<view>车牌号</view>
						<view>{{item.carNumber}}</view>
					</view>
					<view class="li">
						<view>下单时间</view>
						<view>{{item.createTime}}</view>
					</view>
				</view>
				<u-line margin="12rpx 0rpx"></u-line>
				<view class="but">
					<view>订单金额：<text style="color:#FF0000 ;">¥{{item.totalPrice}}</text></view>
					<view class="button">
						<view class="but1" @click="$goBack(2,'/bundle/pages/repairdetails/repairdetails')">详 情</view>
						<view class="but2" @click="refused(item.orderNumber)">驳 回</view>
						<view class="but3" @click="agree(item.orderNumber)">通 过</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else-if="index==1">
			<view class="content" v-for="(item,index) in carList" :key="index">
				<view class="order-top">
					<view class="le">
						<image :src="item.carSeriesImage"></image>

					</view>
					<view class="process">待审核</view>
				</view>
				<u-line margin="12rpx 0rpx"></u-line>
				<view class="list">
					<view class="li">
						<view>品牌</view>
						<view>{{item.carBrandName}}</view>
					</view>
					<view class="li">
						<view>车系</view>
						<view>{{item.carSeriesName}}</view>
					</view>
					<view class="li">
						<view>车型</view>
						<view>{{item.carModelName}}</view>
					</view>
					<view class="li">
						<view>车牌</view>
						<view>{{item.carNumber}}</view>
					</view>
				</view>
				<u-line margin="12rpx 0rpx"></u-line>
				<view class="but">
					<view class="button">
						<view class="but1" @click="$goBack(2,'/bundle/pages/repairdetails/repairdetails?id='+item.id)">详
							情</view>
						<view class="but2" @click="carRefused(item.id)">驳 回11</view>
						<view class="but3" @click="carAgree(item.id)">通 过11</view>
					</view>
				</view>
			</view>
		</view>
				<u-modal :show="show" :content='content' @cancel="show=false" :title="title" :showCancelButton="true"
			@confirm="confirm">
		</u-modal>

		<u-modal :show="shows" :content='contents' @cancel="shows=false" :title="title" :showCancelButton="true"
			@confirm="confirms">
		</u-modal>

		<u-modal :show="carAgreeshow" :content='content' @cancel="carAgreeshow=false" :title="titles"
			:showCancelButton="true" @confirm="carAgreeconfirm">
		</u-modal>

		<u-modal :show="carRefuseshow" :content='contents' @cancel="carRefuseshow=false" :title="titles"
			:showCancelButton="true" @confirm="carRefuseconfirm">
		</u-modal>
		<view v-if="index==1">
			<u-empty v-if="carList.length==0" text="暂无数据">
			</u-empty>
		</view>
		<view v-else>
			<u-empty v-if="lists.length==0" text="暂无数据">
			</u-empty>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-loading-page loading-text="加载中" :loading="loading"></u-loading-page>

		<u-popup :show="efused" mode="center" :round="10">
			<view style="text-align: center; font-size:34rpx ; margin: 10rpx; color:##4d4d4d;">是否确定驳回订单</view>
			<!-- <view style="text-align: center; font-size:24rpx ; margin: 10rpx;">*方便业务人员和你联系*</view> -->
			<view style="padding: 30rpx;width: 400rpx;">
				<u--textarea v-model="notes" placeholder="请输入您的驳回理由"></u--textarea>
				</u--form>
			</view>

			<view style="display: flex;">
				<u-button type="primary" @click="confirms">确定</u-button>
				<u-button @click="efused=false">取消</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUnauditedOrderListByStatus,
		companyAuditPass,
		companyAuditRefund,
		findAuditCarByUserId,
		audit
	} from '@/api/orders.js'
	export default {

		data() {
			return {
				lists: [],
				notes: "",
				carList: [],
				index: 0,
				show: false,
				efused: false,
				shows: false,
				carAgreeshow: false,
				carRefuseshow: false,
				title: '订单审核',
				titles: '车辆订单审核',
				content: `确定通过审核`,
				contents: `确定拒绝审核`,
				orderNumber: '',
				carParam: {},
				loading: true
			}
		},
		onLoad() {
			if (this.index == 0) {
				this.selectDetailByTime()
			} else {
				// 车辆

			}

		},
		methods: {
			refused(e) {
				this.efused = true
				this.orderNumber = e
			},
			carAgreeconfirm() { //车辆审核同意
				audit(this.carParam).then((res) => {
					this.carAgreeshow = false
					this.findCarByStatus();
					this.$refs.uToast.show({
						type: 'default',
						message: "车辆审核通过"
					})

					setTimeout(() => {
						uni.hideLoading()
					}, 1000)
				})
			},
			carRefuseconfirm() { //车辆审核拒绝
				audit(this.carParam).then((res) => {
					this.carRefuseshow = false
					this.findCarByStatus();
					this.$refs.uToast.show({
						type: 'default',
						message: "车辆拒绝通过"
					})

					setTimeout(() => {
						uni.hideLoading()
					}, 1000)
				})
			},
			carRefused(e) {
				this.carRefuseshow = true
				this.carParam = {
					"id": e,
					'status': 3,
				}
			},
			carAgree(e) {
				this.carAgreeshow = true
				this.carParam = {
					"id": e,
					'status': 2,
				}
			},
			confirms() { //订单拒绝
				if (this.notes == "" || this.notes == null) {
					this.$refs.uToast.show({
						type: 'default',
						message: "请输入驳回理由"
					})
					return
				}
				let params = {
					notes: this.notes,
					orderNumber: this.orderNumber
				}
				companyAuditRefund(params).then((res) => {
					this.efused = false
					this.selectDetailByTime();
					this.$refs.uToast.show({
						type: 'default',
						message: "订单已拒绝"
					})

					setTimeout(() => {
						uni.hideLoading()
					}, 1000)
				})
			},
			confirm() { //订单同意
				companyAuditPass(this.orderNumber).then((res) => {
					this.show = false
					this.selectDetailByTime();
					this.$refs.uToast.show({
						type: 'default',
						message: "订单已通过"
					})

					setTimeout(() => {
						uni.hideLoading()
					}, 1000)
				})
			},
			agree(e) {
				this.show = true
				this.orderNumber = e
			},
			selectDetailByTime() {
				let businessId = uni.getStorageSync("businessId")
				getUnauditedOrderListByStatus(businessId).then((res) => {
					this.lists = res.data
					this.loading = false
				})
			},
			findCarByStatus() {
				let userId = uni.getStorageSync("userId")
				findAuditCarByUserId(userId).then((res) => {
					this.carList = res.data.records
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inp {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		@include flex(row, space-between, center) font-size: 30rpx;
	}

	.top {
		padding: 20rpx;
		box-sizing: border-box;
		height: 84rpx;
		font-size: 28rpx;
		background-color: #fff;
		text-align: center;
		display: flex;

		.top-name {
			width: 184rpx;
		}

		.active {
			color: #1677FF;
			position: relative;
			width: 184rpx;
		}

		.active::after {
			content: '';
			position: absolute;
			left: 10%;
			bottom: -20rpx;
			width: 80%;
			border-bottom: solid 4rpx #1677FF;
		}
	}

	.content {
		width: 718rpx;

		margin: 16rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;

		.order-top {
			@include flex(row, space-between, center) .le {
				width: 530rpx;
				font-size: 28rpx;
				font-weight: 600;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.process {
				border: solid 2rpx #8a8a8a;
				padding: 6rpx 20rpx;
				font-size: 26rpx;
				color: #8a8a8a;
				background-color: #eaeaea;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}

		}

		.list {
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 50rpx;

			.li {
				white-space: nowrap;
				/*设置文本超出元素宽度部分隐藏*/
				overflow-x: hidden;
				/*设置文本超出部分用省略号显示*/
				text-overflow: ellipsis;
				@include flex(row, space-between, center)
			}
		}

		.order-content {
			width: 666rpx;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 6rpx;
		}

		.but {
			margin-top: 8rpx;
			font-size: 28rpx;

			@include flex(row, space-between, center) .button {
				color: #2E2E2E;
				display: flex;

				.but1 {
					border: solid 2rpx #979797;
					border-radius: 10rpx;
					margin-right: 15rpx;
					padding: 8rpx 30rpx;
					font-size: 24rpx;
				}

				.but2 {
					border: solid 2rpx #FF0000;
					color: #FF0000;
					border-radius: 10rpx;
					margin-right: 15rpx;
					padding: 8rpx 35rpx;
					font-size: 24rpx;
				}

				.but3 {
					background-color: #1677FF;
					color: #ffffff;
					border-radius: 10rpx;
					margin-right: 10rpx;
					padding: 8rpx 35rpx;
					font-size: 24rpx;
				}
			}
		}

	}

	::v-deep .u-transition {
		// position: absolute !important; 
		top: 120rpx !important;
	}

	::v-deep .u-input {
		height: 44rpx !important;
		margin: 0rpx 40rpx 0rpx 32rpx;
		background-color: #efefef !important;

	}
</style>